<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org/" lang="zh">
<head th:include="include/css-head :: css-head">
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <title>在线答题</title>
    <meta content="vsCode" name="Generator">
    <link href="/static/css/bootstrap.min.css" rel="stylesheet"/>
    <style type="text/css">
        hr {
            margin-top: 15px;
        }

        html, body {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body style="background-color: #e0e1e3; background-size: 100%;font-size: 15px;">
<div id="form1" style=" width:90%; margin:2px auto;font-size: 20px;">
    <form action="postExam" method="post" name="examform">
        <div style="margin-top: 20px; text-align: center;">
            <h5 style="font-size: 3rem" class="modal-title text-center" id="accLogModelHead">
                宝鸡市总工会<br>
                劳动法律知识竞赛
            </h5>
            <h6 style="font-size: 2rem" class="modal-title text-center" th:text="${session.answerType}==1?'初赛答题':'复赛答题'"></h6>
            <h6 class="modal-title text-center" hidden="hidden" id="answerType" th:text="${session.answerType}"></h6>
            <div style="text-align: center;">考 试 限 时：<span id="sp3"
                                                           th:text="${session.answerType}==1?'50分钟':'60分钟'"></span>
            </div>
            <div style="text-align: center;">剩 余 时 间：<span id="sp4"></span>
                <input id="usetime" type="hidden" value="0"/>
                <input  id="staffid" th:value="${session.staffid}" type="hidden"/>
                <input  id="openId" th:value="${session.openId}" type="hidden"/>
            </div>
        </div>
        <div>
            <div th:each="m,iterStat:${questions}">
                <div>
                    <hr style=" height:1px;"/>
                </div>
                <div style="margin-bottom: 5px;"
                     th:text="'Q'+${iterStat.index+1}+'.'+  (${m.type}=='单选题'?'【单选题】':'【多项选择题】')   + ${m.questionname}"></div>
                <div>
                    <label style="font-weight: normal">
                        <input class="q_input" required th:name="${m.id}"
                               th:text="'A、'+${m.optionA}"
                               th:type="${m.type}=='单选题'?'radio':'checkbox'" th:value="A">
                    </label>
                </div>
                <div>
                    <label style="font-weight: normal">
                        <input class="q_input" required th:name="${m.id}"
                               th:text="'B、'+${m.optionB}"
                               th:type="${m.type}=='单选题'?'radio':'checkbox'" th:value="B">
                    </label>
                </div>
                <div th:if="${m.optionC!=null&&m.optionC!=''}">
                    <label style="font-weight: normal">
                        <input class="q_input" required
                               th:name="${m.id}"
                               th:text="'C、'+${m.optionC}"
                               th:type="${m.type}=='单选题'?'radio':'checkbox'" th:value="C">
                    </label>
                </div>
                <div th:if="${m.optionD!=null&&m.optionD!=''}">
                    <label style="font-weight: normal">
                        <input class="q_input" required
                               th:name="${m.id}"
                               th:text="'D、'+${m.optionD}"
                               th:type="${m.type}=='单选题'?'radio':'checkbox'" th:value="D">
                    </label>
                </div>
                <div th:if="${m.optionE!=null&&m.optionE!=''}">
                    <label style="font-weight: normal">
                        <input class="q_input" required
                               th:name="${m.id}"
                               th:text="'E、'+${m.optionE}"
                               th:type="${m.type}=='单选题'?'radio':'checkbox'" th:value="E">
                    </label>
                </div>
                <div th:if="${m.optionF!=null&&m.optionF!=''}">
                    <label style="font-weight: normal">
                        <input class="q_input" required
                               th:name="${m.id}"
                               th:text="'F、'+${m.optionF}"
                               th:type="${m.type}=='单选题'?'radio':'checkbox'" th:value="F">
                    </label>
                </div>
                <div th:if="${m.optionG!=null&&m.optionG!=''}">
                    <label>
                        <input class="q_input" required
                               th:name="${m.id}"
                               th:text="'F、'+${m.optionG}"
                               th:type="${m.type}=='单选题'?'radio':'checkbox'" th:value="G">
                    </label>
                </div>
                <div th:if="${m.optionH!=null&&m.optionH!=''}">
                    <label>
                        <input class="q_input" required
                               th:name="${m.id}"
                               th:text="'F、'+${m.optionH}"
                               th:type="${m.type}=='单选题'?'radio':'checkbox'" th:value="H">
                    </label>
                </div>
            </div>
        </div>
        <div>
            <hr style=" height:1px;"/>
        </div>
        <div style="width: 100px;margin: 0 auto 100px">
            <input id="submi" style="background: #00a0e9; height: 35px; width: 100px; color: white;" type="button"
                   value="提交"
                   width="100">
        </div>
    </form>
</div>

<script src="/static/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/static/bower_components/jquery/dist/jquery.cookie.js"></script>
<script src="/static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
    let answerType = $("#answerType").text();
    let openId = $("#openId").val();
    $(function () {
        if (answerType === "1") {
            show_time(3000);
        }
        if (answerType === "2") {
            show_time(3600);
        }
        $("#submi").click(function () {
            let flag = confirm("确定要交卷吗？");
            if (flag) {
                $("#submi").attr("disabled", true).val("正在提交...").css('backgroundColor', '#888888');
                let res = validate_all();
                let staffid = $("#staffid").val();
                let usetime = getUsetime($("#usetime").val());
                console.log(res);
                saveScore(res, staffid, usetime);
            } else {
                return false;
            }
        });
    });

    function saveScore(res, staffid, use_time) {
        $.ajax({
            url: "/exam/examCommit/" + answerType,
            type: "post",
            dataType: "json",
            cache: false,
            data: {
                res: res,
                staffid: staffid,
                use_time: use_time
            },
            success: function (data) {
                if (data.status === 'success') {
                    location.href = "/exam/toResult";
                } else {
                }
            }
        });
    }

    function validate_all() {
        /*  let radioName = [];
          $(":radio").each(function(){
              radioName.push($(this).attr("name"));
          });
          let checkboxName = [];
          $(":checkbox").each(function(){
              checkboxName.push($(this).attr("name"));
          });*/
        let radioName = [];
        $(".q_input").each(function () {
            radioName.push($(this).attr("name"));
        });

        /* radioName.sort();*/
        $.unique(radioName);
        // $.unique(checkboxName);
        let res = '';
        $.each(radioName, function (i, val) {
            let type = $("[name=" + val + "]").attr('type');
            if (type === "radio") {
                let str = $("input[name=" + val + "]:checked").val();
                res += str != null && str !== '' ? str + "-" + i + "," : ',';
            } else if (type === "checkbox") {
                let str = "";
                $("input[name=" + val + "]:checked").each(function () {
                    str += $(this).val();
                })
                res += str != null && str !== '' ? str + "=" + i + "," : ',';
            }
        });
        /* $.each(checkboxName,function(i,val){
             let str="";
             $("input[name="+val+"]:checked").each(function(){
                 str+=$(this).val();
             })
             res+=val!=null?str+"-"+i+",":',';
         });*/

        return res;
    }

    function show_time(totalTime) {
        if (totalTime == 0) {
            let res = validate_all();
            let staffid = $("#staffid").val();
            let usetime = getUsetime($("#usetime").val());
            saveScore(res, staffid, usetime);
        }
        if (totalTime > 0) {
            let remainTime = totalTime - 1;
            let min = remainTime / 60;
            min = parseInt(min);
            let s = remainTime % 60;
            if (s < 10) {
                s = "0" + s;
            }
            let str = "0" + min + ":" + s;
            $("#sp4").text(str);
            if (answerType==="1"){
                $("#usetime").val( 50*60  - remainTime);
            }
            if (answerType==="2"){
                $("#usetime").val( 60*60  - remainTime);
            }

            setTimeout("show_time(" + remainTime + ")", 1000);
        }
    }

    function getUsetime(remainTime) {
        let min = remainTime / 60;
        min = parseInt(min);
        let s = remainTime % 60;
        if (s < 10) {
            s = "0" + s;
        }
        return "0" + min + ":" + s;
    }

    function checkAllChecked() {
        let name = $(":radio").attr('name');
        $.unique(name);
    }

    pushHistory();
    function pushHistory() {
        history.pushState('', '', '/goWxIndex?id='+openId)
    }
</script>
</body>
</html>
